<template>
  <div class="category_page footer-page">
    <div class="top_tabs">
      <el-tabs
        v-model="activeName"
        @tab-click="handleClick"
      >
        <el-tab-pane
          v-for="item in tabList"
          :key="item.id"
          :label="item.main_title"
          :name="item.id+''"
        >
        </el-tab-pane>
      </el-tabs>
      <el-link
        v-if="tabList.length > 0 && $hasMethod('#add')"
        href="/webConfig/show"
        :underline="false"
        type="primary"
      >添加板块</el-link>
    </div>
    <div class="flex tab_content">
      <div class="img_wrapper">
        <el-image :src="require('../../../assets/images/demo_activity.jpg')">
          <div
            slot="error"
            class="image-slot"
          >
            <i class="el-icon-picture-outline"></i>
          </div>
        </el-image>
      </div>
      <div class="config_wrapper">
        <div
          v-if="!$hasMethod('#edit')"
          class="mask"
        ></div>
        <h5>{{configTitle}}</h5>
        <div class="main">
          <template v-for="(item, index) in dataList">
            <goods-link
              :key="index"
              :goods-data="item"
              :show-tool="$hasMethod('#edit')"
              @handleDelete="deleteGoods(index)"
              @upSort="upSort(index)"
              @downSort="downSort(index)"
            ></goods-link>
          </template>
          <div
            v-if="dataList.length < 5 && $hasMethod('#edit')"
            class="add-div"
            @click="openSelect"
          >
            <i class="el-icon-plus"></i>添加商品({{dataList.length}}/5)
          </div>
        </div>
      </div>
    </div>
    <div
      class="page-footer-btns"
      v-if="$hasMethod('#edit')"
    >
      <el-button
        size="small"
        @click="reset"
      >重置</el-button>
      <el-button
        size="small"
        type="primary"
        @click="submit"
      >保存</el-button>
    </div>
    <goods-dialog
      ref="goodsDialog"
      :multiple="true"
      :maxNum="5"
      :show-checked-tool="true"
      @setSelect="setSelect"
    ></goods-dialog>
  </div>
</template>

<script>
import { getActivity, getActivityGoods, addActivityGoods } from "@/api/recommend";
import goodsLink from "../compoments/goodsLink";
import goodsDialog from "@/components/goodsDialog.vue";
export default {
  components: { goodsLink, goodsDialog },
  data() {
    return {
      activeName: "",
      tabList: [],
      dataList: []
    }
  },
  computed: {
    configTitle() {
      const tab = this.tabList.find(item => item.id == this.activeName);
      return tab ? tab.main_title : "活动板块配置";
    }
  },
  methods: {
    // 升序
    upSort(index) {
      if (index === 0) {
        return;
      }
      let item = this.dataList[index];
      this.$set(this.dataList, index, this.dataList[index - 1]);
      this.$set(this.dataList, index - 1, item);
    },
    // 降序
    downSort(index) {
      if (index === this.dataList.length - 1) {
        return;
      }
      let item = this.dataList[index];
      this.$set(this.dataList, index, this.dataList[index + 1]);
      this.$set(this.dataList, index + 1, item);
    },
    // 删除商品
    deleteGoods(index) {
      this.dataList.splice(index, 1);
    },
    // 设置选中
    setSelect(goodsList) {
      this.dataList = goodsList;
    },
    // 添加商品
    openSelect() {
      this.$refs.goodsDialog.dialogVisible = true;
      this.$refs.goodsDialog.selectItems = [...this.dataList];
    },
    submit() {
      // 保存
      const list = this.dataList.map(obj => obj.goods_id);
      addActivityGoods({
        module_id: this.activeName,
        goodsidStr: list.join(',')
      }).then(res => {
        this.getData();
      })
    },
    reset() {
      // 重置
      this.getData();
    },
    handleClick(tab) {
      this.getData();
    },
    // 获取商品列表
    getData() {
      getActivityGoods(this.activeName).then(res => {
        this.dataList = res;
      })
    },
    getTabs() {
      getActivity().then(res => {
        this.tabList = res;
        this.activeName = this.tabList[0].id + "";
        this.getData();
      });
    }
  },
  mounted() {
    this.getTabs();
  }
}
</script>

<style lang="scss" scoped>
</style>
